<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度地图/腾讯地图定位demo...</title>
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <script src="js/flexible.js" type="text/javascript"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Caovmo3VijGgjLdpm8C5NiEHGthavrpS"></script>
    <script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=6DXBZ-HXCC4-FG4UR-XBSTY-YUCB7-DDF4F&referer=myapp"></script>
    <script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=6DXBZ-HXCC4-FG4UR-XBSTY-YUCB7-DDF4F"></script>
    <style>
        body {
            background: #fff;
        }

        #allmap,
        #qqmap {
            height: 4rem;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: .36rem;
            background: #f6f6f6;
            justify-content: center;
        }

        .bdpoint,
        .qqpoint {
            font-size: .3rem;
            line-height: 1.6;
            background: linear-gradient(135deg, #ff4c9f, #ff7b74);
            margin: .1rem 0;
        }
    </style>
</head>

<body>
    <div id="qqmap">（腾讯）获取位置地图中...</div>
    <div class="qqpoint"></div>
    <div id="allmap">（百度）获取位置地图中...</div>
    <div class="bdpoint"></div>

    <script>
        $(function () {
            //腾讯地图
            var qq_geolocation = new qq.maps.Geolocation();

            function showPosition(position) {
                $(".qqpoint").html(position.addr + "：经度:" + position.lng + "，纬度:" + position.lat);
                //$(".qqpoint").text(JSON.stringify(position, null, 4));
                console.info(position);
                var qqmap = new qq.maps.Map(document.getElementById("qqmap"), {
                    center: new qq.maps.LatLng(position.lat, position.lng),
                    zoom: 16, //设置缩放级别
                    draggable: true, //设置是否可以拖拽
                    scrollwheel: false, //设置是否可以滚动
                    disableDoubleClickZoom: false //设置是否可以双击放大
                });
                var marker = new qq.maps.Marker({
                    map: qqmap,
                    position: new qq.maps.LatLng(position.lat, position.lng)
                });
                marker.setTitle(position.addr)
            };

            function showErr() {
                $(".qqpoint").text("获取当前位置失败");
            };
            qq_geolocation.getLocation(showPosition, showErr, null);

            //百度地图
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var point = r.point,
                        lng = point.lng,
                        lat = point.lat;
                    var point = new BMap.Point(lng, lat);
                    var map = new BMap.Map("allmap");
                    map.centerAndZoom(point, 16);
                    var marker = new BMap.Marker(point); // 创建标注
                    map.addOverlay(marker); // 将标注添加到地图中

                    //获取当前地理位置名称 
                    var geoc = new BMap.Geocoder();
                    geoc.getLocation(point, function (rs) {
                        var addComp = rs.addressComponents;
                        console.info(addComp.city + ", " + addComp.district + ", " + addComp.street);
                        $(".bdpoint").html(addComp.city + addComp.district + addComp.street +
                            "：经度:" + lng + "，纬度:" + lat);;
                    });

                } else {
                    console.info('failed' + this.getStatus());
                }
            }, {
                enableHighAccuracy: true
            });
        });
    </script>

</body>

</html>